<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试select2-4.1.0</title>
    <link rel="stylesheet" type="text/css" href="../dist/css/select2.css">
    <link rel="stylesheet" type="text/css" href="../dist/css/bootstrap.min.css">
    <script type="application/javascript" src="../../jquery-1.9.1.min.js"></script>
    <!--<script type="application/javascript" src="../../jquery-3.2.1.min.js"></script>-->
    <script type="application/javascript" src="../dist/js/select2.js"></script>

</head>

<body>
<div class="container">
    <div class="col-md-12">
        <h1 style="text-align:center">Select2 Live Demo</h1>

        <h6 style="text-align:center"><a href="https://ops-coffee.cn">@ops-coffee.cn</a>
            <a href="https://blog.ops-coffee.cn/s/2w956ln2fA1jzdC-UQ55Vg">点我查看对应使用文档</a>
        </h6>
        <div class="form-group">
            <label class="control-label">Demo1 - 单选Demo：</label>
            <select class="form-control" id="id_select2_demo1">
                <option value="">-----单选-----</option>
                <optgroup label="Group-A">
                    <option value="1">OPS-COFFEE-A</option>
                    <option value="2">OPS-COFFEE-B</option>
                </optgroup>

                <optgroup label="Group-B">
                    <option value="3">OPS-COFFEE-C</option>
                    <option value="4">OPS-COFFEE-D</option>
                </optgroup>
                <optgroup label="Group-C">
                    <option value="5">OPS-COFFEE-E</option>
                    <option value="6">OPS-COFFEE-F</option>
                </optgroup>
                <option value="7">OPS-COFFEE-G</option>
            </select>
        </div>
        <div class="form-group">
            <label class="control-label">Demo2 - 从本地加载数据：</label>
            <select class="form-control" id="id_select2_demo2"></select>
        </div>
        <div class="form-group">
            <label class="control-label">Demo3 - 从后端加载数据：</label>
            <select class="form-control" id="id_select2_demo3"></select>
        </div>
        <div class="form-group">
            <label class="control-label">Demo4 - 多选Demo：</label>
            <select class="form-control" id="id_select2_demo4" multiple="multiple">
                <option value="1">OPS-COFFEE-A</option>
                <option value="2">OPS-COFFEE-B</option>
                <option value="3">OPS-COFFEE-C</option>
                <option value="4">OPS-COFFEE-D</option>
                <option value="5">OPS-COFFEE-E</option>
                <option value="6">OPS-COFFEE-F</option>
                <option value="7">OPS-COFFEE-G</option>
            </select>
        </div>
        <div class="form-group">
            <button class="btn btn-default btn-block" id="add">Add : 会给Demo1添加一个新的option并打开demo1</button>
            <button class="btn btn-primary btn-block" id="get">Get : 会获取Demo1的value和text并alert显示</button>
            <button class="btn btn-success btn-block" id="init">Init : 会给Demo1和Demo4动态的添加选中的option</button>
            <button class="btn btn-warning btn-block" id="clear">Clear : 会清掉Demo1和Demo4选中的option</button>
            <button class="btn btn-default btn-block" id="disabled">Disabled : 会Disabled掉Demo1和Demo4</button>
            <button class="btn btn-danger btn-block" id="destroy">销毁 : 会销毁掉Demo1和Demo4的select2样式，恢复默认样式</button>
        </div>
    </div>
</div>

</body>
</html>
<script>
    // select2单选
    var selectorx = $ ('#id_select2_demo1').select2 ({
        placeholder: '请选择'
    });

    // select2单选从本地加载数据
    var sdata = [{
        id: 1,
        text: 'OPS-COFFEE-1'
    },
        {
            id: 2,
            text: 'OPS-COFFEE-2'
        },
        {
            id: 3,
            text: 'OPS-COFFEE-3'
        }
    ];

    $ ('#id_select2_demo2').select2 ({
        data: sdata,
        minimumResultsForSearch: -1
    });

    // select2单选ajax异步加载数据
    $ ('#id_select2_demo3').select2 ({
        placeholder: '-----单选-----',
        ajax: {
            url: "sdata.json",
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    search: params.term,
                    site: "https://ops-coffee.cn"
                };
            },
            processResults: function (data) {
                return {
                    results: data.message
                };
            },
            cache: true
        },
        minimumInputLength: 2
    });

    // select2多选
    var selectory = $ ('#id_select2_demo4').select2 ({
        placeholder: '请选择，最多选择三个',
        allowClear: true,
        maximumSelectionLength: 3
    });

    // 动态添加值
    $ ('#add').click (function () {
        var _html = '<option value="9" selected>我是新加的：ops-coffee.cn</option>';
        $ ('#id_select2_demo1').append (_html).trigger ('change.select2');
        $ ('#id_select2_demo1').select2 ("open");
    });

    // 获取选中的值
    $ ('#get').click (function () {
        alert ('value: ' + $ ('#id_select2_demo1').select2 ('val') + ' text: ' +
                $ ("#id_select2_demo1").select2 ("data")[0].text);
    });

    // 动态选中，初始化
    $ ('#init').click (function () {
        $ ("#id_select2_demo1").val (2).trigger ("change");
        $ ("#id_select2_demo4").val ([2, 3, 5]).trigger ("change");
    });

    // 清空已选择的option
    $ ('#clear').click (function () {
        $ ("#id_select2_demo1").val (null).trigger ('change');
        $ ("#id_select2_demo4").val (null).trigger ('change');
    });

    // 禁用select2
    $ ('#disabled').click (function () {
        $ ("#id_select2_demo1").prop ('disabled', true);
        $ ("#id_select2_demo4").prop ('disabled', true);
    });

    // 销毁duallistbox插件
    $ ('#destroy').click (function () {
        $ ('#id_select2_demo1').select2 ("destroy");
        $ ('#id_select2_demo4').select2 ("destroy");
    });
</script>